<!--
 * @Author: your name
 * @Date: 2021-07-12 15:21:07
 * @LastEditTime: 2021-07-19 18:45:52
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /shb-pc-fe/src/modules/setting/productV2/productSet/components/addDialog.vue
-->
<template>
  <base-modal :title="$t('product.setting.qrcodeGuideDialog.title')" :show.sync="visible" width="800px">
    <!-- 第一步 -->
    <template v-if="!step">
      <h4 class="guide-hint">
        {{$t('product.setting.qrcodeGuideDialog.des1')}}
      </h4>
      <el-select
        class="select-hidden-accessible"
        multiple
        clearable
        filterable
        v-model="productInfo"
      >
        <el-option
          v-for="item in productOptions"
          :key="item.fieldName"
          :label="item.displayName"
          :value="item.fieldName"
        >
        </el-option>
      </el-select>
      <div class="qrcode-setting-preview">
        <img :src="setpImage1" />
        <div class="qrcode-setting-text qrcode-setting-step-1">
          <div class="qrcode-setting-tail"></div>
          <p>{{$t('product.setting.qrcodeGuideDialog.des2')}}</p>
          <p>{{$t('product.setting.qrcodeGuideDialog.des3')}}</p>
        </div>
      </div>
    </template>
    <template v-else>
      <h4 class="guide-hint">
        {{$t('product.setting.qrcodeGuideDialog.des4')}}
      </h4>
      <p class="mr-l-20">* {{$t('product.setting.qrcodeGuideDialog.des5')}}</p>
      <p class="mr-l-20">* {{$t('product.setting.qrcodeGuideDialog.des6')}}</p>
      <el-select
        class="select-hidden-accessible"
        multiple
        clearable
        filterable
        v-model="eventInfo"
      >
        <el-option
          v-for="item in eventOptions"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <div class="qrcode-setting-preview">
        <img :src="setpImage2" />
        <div class="qrcode-setting-text qrcode-setting-step-2">
          <div class="qrcode-setting-tail"></div>
          <p>{{$t('product.setting.qrcodeGuideDialog.des7')}}</p>
          <p>{{$t('product.setting.qrcodeGuideDialog.des8')}}</p>
        </div>
      </div>
    </template>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="saveStepOne" v-if="!step"
        >{{$t('common.base.nextStep')}}</el-button
      >
      <el-button type="primary" @click="step = 0" v-if="step">{{$t('common.base.previousStep')}}</el-button>
      <el-button type="primary" @click="save" v-if="step"
        >{{$t('common.base.finish')}}</el-button
      >
    </div>
  </base-modal>
</template>
<script>
import { productTypeData,saveFunc,saveField4Qrcode,saveEventType} from '@src/api/ProductV2Api'
import { getLocalesOssUrl } from '@src/util/assets'
const setpImage1 = getLocalesOssUrl('/qrcode-step-1.png')
const setpImage2 = getLocalesOssUrl('/qrcode-step-2.png')
export default {
  data() {
    return {
      setpImage1,
      setpImage2,
      visible: false,
      productInfo: [],
      productOptions: [],
      eventInfo:[],
      eventOptions:[],
      step: 0,
    }
  },
  methods: {
    async open() {
      await this.getProductTypeData()   
      this.visible = true
      this.step = 0
    },
    async save(){
      let res= await saveEventType({typeIds:this.eventInfo.toString()})
      if(res.succ){
          this.visible=false
          this.step = 0
          this.$emit('saveFunc',{flow:'qrcodeEnabled',state:true})
      }else{
          this.$platform.alert(res.message);
      }
    },
    async saveStepOne(){
       let res=await saveField4Qrcode({fieldNames:this.productInfo.toString()})
       if(res.succ){
          this.step=1
       }else{
         this.$platform.alert(res.message);
       }
    },
    async getProductTypeData(){
      let res= await productTypeData()
      if(res.succ){
          this.productInfo=res.data.fieldNameList
          this.productOptions=res.data.productFieldsJson
          this.eventOptions=res.data.eventTypeListJson
          this.eventInfo=res.data.typeIds4Qrcode
      }
    }
  },
}
</script>
<style scoped lang="scss">
.mr-l-20 {
  margin-left: 20px;
}
.product-menu-guide {
  margin: 10px 20px;
}
.select-hidden-accessible {
  width: 90%;
  margin: 0 20px;
}
.guide-hint {
  margin: 20px;
  font-size: 16px;
}
.qrcode-setting-preview {
  position: relative;
  height: 355px;
  margin: 10px auto;
  img {
    position: absolute;
    left: 185px;
    top: 15px;
    display: block;
    width: 150px;
    height: calc(100% - 15px);
  }
  .qrcode-setting-step-1 {
    top: 140px;
  }
  .qrcode-setting-step-2 {
    top: 195px;
  }
  .qrcode-setting-text {
    position: absolute;
    right: 165px;
    width: 220px;
    border-radius: 2px;
    background-color: #fafafa;
    color: #666;
    padding: 8px;
    font-size: 14px;
    .qrcode-setting-tail {
      position: absolute;
      top: 50%;
      left: -100px;
      width: 100px;
      height: 1px;
      background-color: #a3a3a3;
      &::before {
        content: '';
        position: absolute;
        left: -5px;
        top: -5px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #a3a3a3;
      }
    }
  }
}
</style>